<template>
  <div class="price-chart-demo">
    <el-card class="chart-card">
      <template #header>
        <div class="card-header">
          <span>股票价格走势图</span>
          <el-button link @click="refreshData">
            <el-icon>
              <Refresh />
            </el-icon>
            刷新
          </el-button>
        </div>
      </template>
      
      <div class="chart-container">
        <PriceChart 
          :chartData="chartData" 
          :lineColor="'#409EFF'" 
          :buyPointColor="'#67C23A'" 
          height="400px"
          :showArea="true"
          :smooth="true"
          :title="'股票价格走势与买入点'"
          :showXAxis="true"
          :showYAxis="true"
        />
      </div>
      
      <div class="chart-controls">
        <el-divider>图表控制</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="线条颜色">
              <el-color-picker v-model="lineColor" show-alpha />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="买入点颜色">
              <el-color-picker v-model="buyPointColor" show-alpha />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="显示设置">
              <el-switch v-model="showArea" active-text="显示面积" />
              <el-switch v-model="smooth" active-text="平滑曲线" style="margin-left: 10px" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-card>
    
    <el-card class="chart-card" style="margin-top: 20px">
      <template #header>
        <div class="card-header">
          <span>买入记录</span>
        </div>
      </template>
      
      <el-table :data="chartData.buyPoints" style="width: 100%">
        <el-table-column prop="date" label="买入日期" width="180" />
        <el-table-column prop="price" label="买入价格" width="180">
          <template #default="scope">
            <span>{{ scope.row.price.toFixed(2) }}元</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="买入数量">
          <template #default="scope">
            <span>{{ scope.row.amount }}股</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button type="danger" size="small" @click="removeBuyPoint(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div style="margin-top: 20px">
        <el-divider>添加买入点</el-divider>
        <el-form :model="newBuyPoint" inline>
          <el-form-item label="日期">
            <el-date-picker 
              v-model="newBuyPoint.date" 
              type="date" 
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="价格">
            <el-input-number v-model="newBuyPoint.price" :precision="2" :step="0.01" :min="0" />
          </el-form-item>
          <el-form-item label="数量">
            <el-input-number v-model="newBuyPoint.amount" :step="100" :min="100" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addBuyPoint">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import PriceChart from '@/components/chart/PriceChart.vue'

// 图表控制参数
const lineColor = ref('#409EFF')
const buyPointColor = ref('#67C23A')
const showArea = ref(true)
const smooth = ref(true)

// 生成随机价格数据
const generateRandomPrices = (days = 30, basePrice = 100, volatility = 0.02) => {
  const prices = []
  let currentPrice = basePrice
  
  for (let i = 0; i < days; i++) {
    // 添加一些随机波动
    const change = currentPrice * volatility * (Math.random() * 2 - 1)
    currentPrice = Math.max(1, currentPrice + change) // 确保价格不会低于1
    prices.push(parseFloat(currentPrice.toFixed(2)))
  }
  
  return prices
}

// 生成日期数据
const generateDates = (days = 30) => {
  const dates = []
  const today = new Date()
  
  for (let i = days - 1; i >= 0; i--) {
    const date = new Date(today)
    date.setDate(today.getDate() - i)
    dates.push(date.toISOString().split('T')[0]) // 格式化为 YYYY-MM-DD
  }
  
  return dates
}

// 图表数据
const chartData = reactive({
  prices: generateRandomPrices(),
  dates: generateDates(),
  buyPoints: [
    { date: generateDates()[5], price: generateRandomPrices()[5], amount: 1000 },
    { date: generateDates()[12], price: generateRandomPrices()[12], amount: 2000 },
    { date: generateDates()[20], price: generateRandomPrices()[20], amount: 1500 }
  ]
})

// 刷新数据
const refreshData = () => {
  chartData.prices = generateRandomPrices()
  chartData.dates = generateDates()
  
  // 更新买入点的价格以匹配新的价格数据
  chartData.buyPoints.forEach(point => {
    const dateIndex = chartData.dates.findIndex(date => date === point.date)
    if (dateIndex !== -1) {
      point.price = chartData.prices[dateIndex]
    }
  })
  
  ElMessage.success('数据已刷新')
}

// 新买入点
const newBuyPoint = reactive({
  date: '',
  price: 0,
  amount: 1000
})

// 添加买入点
const addBuyPoint = () => {
  if (!newBuyPoint.date) {
    ElMessage.warning('请选择日期')
    return
  }
  
  if (newBuyPoint.price <= 0) {
    ElMessage.warning('价格必须大于0')
    return
  }
  
  if (newBuyPoint.amount <= 0) {
    ElMessage.warning('数量必须大于0')
    return
  }
  
  // 检查日期是否在图表范围内
  if (!chartData.dates.includes(newBuyPoint.date)) {
    ElMessage.warning('所选日期不在图表范围内')
    return
  }
  
  // 添加新买入点
  chartData.buyPoints.push({
    date: newBuyPoint.date,
    price: newBuyPoint.price,
    amount: newBuyPoint.amount
  })
  
  // 重置表单
  newBuyPoint.date = ''
  newBuyPoint.price = 0
  newBuyPoint.amount = 1000
  
  ElMessage.success('买入点已添加')
}

// 删除买入点
const removeBuyPoint = (index) => {
  chartData.buyPoints.splice(index, 1)
  ElMessage.success('买入点已删除')
}

// 监听颜色变化
watch([lineColor, buyPointColor], () => {
  // 颜色变化会通过props传递给图表组件
})

// 监听显示设置变化
watch([showArea, smooth], () => {
  // 显示设置变化会通过props传递给图表组件
})
</script>

<style scoped>
.price-chart-demo {
  padding: 20px;
}

.chart-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  margin-top: 10px;
  margin-bottom: 20px;
}

.chart-controls {
  margin-top: 20px;
}

.el-divider {
  margin: 16px 0;
}

.el-form-item {
  margin-bottom: 10px;
}
</style>